<template>
	<view class="x-popup-mask" :class="{ 'x-popup--show': value }" @tap="hide" @mousemove.stop>
		<view class="x-popup-content" :style="value ? 'top:' + top : 'top:100vh'" @tap.stop>
			<slot />
		</view>
	</view>
</template>

<script>
	export default {
		model: {
			prop: 'value',
			event: 'input'
		},
		props: {
			value:{
				type: Boolean,
				default: false
			},
			top: {
				type: String,
				default: '0'
			}
		},
		methods: {
			hide() {
				this.$emit('input', false)
			}
		}
	}
</script>

<style lang="scss" scoped>
.x-popup {
	&-mask {
	--x-popup-bg: #fff;
		overflow: hidden;
		position: fixed;
		left: 0;
		right: 0;
		top: 100%;
		bottom: 0;
		z-index: 1000;
		background-color: rgba(0, 0, 0, 0);
		transition: background-color .3s;
	}

	&-content {
		position: fixed;
		left: 0;
		right: 0;
		top: 100vh;
		bottom: 0;
		z-index: 1001;
		background-color: var(--x-popup-bg);
		background-image: var(--x-popup-bg-image);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		overflow: hidden;
		transition: top .5s;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
	}

	&--show {
		top: 0;
		background-color: rgba(0, 0, 0, .5);
	}
}
</style>